<template>
  <div>
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      title="城市选择"
      :placeholder="true"
    ></van-nav-bar>
    <!-- <van-search v-model="value" placeholder="请输入城市名" /> -->

    <!-- <div class="cl-area">
      <div class="cl-title border-topbottom">当前城市</div>
      <div  class="cl-button-list">
        <div class="cl-button-wrapper">
          <div class="cl-button">{{ LocationCity }}</div>
        </div>
      </div>
    </div>
    <div class="cl-area" v-for="(item, index) in hotlists" :key="index">
      <div class="cl-title border-topbottom">{{ item.name }}</div>
      <div class="cl-button-list">
        <div v-for="(i, index1) in item.cities" :key="index1" class="cl-button-wrapper">
          <div class="cl-button">{{ i.name }}</div>
        </div>
      </div>
    </div> -->
    <van-index-bar
      :sticky-offset-top="50"
      highlight-color="#000000"
      :index-list="indexList"
    >
      <van-index-anchor index="A" />
      <van-cell
        v-for="(item, index) in lista"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="B" />
      <van-cell
        v-for="(item, index) in listb"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="C" />
      <van-cell
        v-for="(item, index) in listc"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="D" />
      <van-cell
        v-for="(item, index) in listd"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="E" />
      <van-cell
        v-for="(item, index) in liste"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="F" />
      <van-cell
        v-for="(item, index) in listf"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="G" />
      <van-cell
        v-for="(item, index) in listg"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="H" />
      <van-cell
        v-for="(item, index) in listh"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="J" />
      <van-cell
        v-for="(item, index) in listj"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="K" />
      <van-cell
        v-for="(item, index) in listk"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="L" />
      <van-cell
        v-for="(item, index) in listl"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="M" />
      <van-cell
        v-for="(item, index) in listm"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="N" />
      <van-cell
        v-for="(item, index) in listn"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="P" />
      <van-cell
        v-for="(item, index) in listp"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="Q" />
      <van-cell
        v-for="(item, index) in listq"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="R" />
      <van-cell
        v-for="(item, index) in listr"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="S" />
      <van-cell
        v-for="(item, index) in lists"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="T" />
      <van-cell
        v-for="(item, index) in listt"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="W" />
      <van-cell
        v-for="(item, index) in listw"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="X" />
      <van-cell
        v-for="(item, index) in listx"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="Y" />
      <van-cell
        v-for="(item, index) in listy"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />

      <van-index-anchor index="Z" />
      <van-cell
        v-for="(item, index) in listz"
        :key="index"
        :title="item.name"
        @click="gain(item.name)"
      />
    </van-index-bar>
  </div>
</template>

<script>
import cityLists from "../../assets/js/city.json";
export default {
  name: "Location",
  data() {
    return {
      indexList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z"
      ], // 自定义索引
      //  indexList: ['1','2','3','4','5'],  // 自定义索引
      value: "",
      cities: {},
      hotCities: [],
      letter: "",
      list: ["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg"],
      //
      hotlists: [],
      hotcity: [],
      LocationCity: "正在定位",
      lista: [], // A 下的所有城市
      listb: [], // B  下的所有城市
      listc: [], // C  下的所有城市
      listd: [], // D  下的所有城市
      liste: [], // E  下的所有城市
      listf: [], // F  下的所有城市
      listg: [], // G  下的所有城市
      listh: [], // H  下的所有城市
      listj: [], // J  下的所有城市
      listk: [], // K  下的所有城市
      listl: [], // L  下的所有城市
      listm: [], // M  下的所有城市
      listn: [], // N  下的所有城市
      listp: [], // P  下的所有城市
      listq: [], // Q  下的所有城市
      listr: [], // R  下的所有城市
      lists: [], // S  下的所有城市
      listt: [], // T  下的所有城市
      listw: [], // W  下的所有城市
      listx: [], // X  下的所有城市
      listy: [], // Y  下的所有城市
      listz: [] // Z  下的所有城市

      //
    };
  },
  mounted() {
    this.cltyList();
  },
  methods: {
    cltyList() {
      this.lista = cityLists.city[0].lista;
      // console.log(this.lista)

      this.listb = cityLists.city[1].listb;
      // console.log(this.listb)

      this.listc = cityLists.city[2].listc;
      // console.log(this.listc)

      this.listd = cityLists.city[3].listd;
      // console.log(this.listd)

      this.liste = cityLists.city[4].liste;
      // console.log(this.liste)

      this.listf = cityLists.city[5].listf;
      // console.log(this.listf)

      this.listg = cityLists.city[6].listg;
      // console.log(this.listg)

      this.listh = cityLists.city[7].listh;
      // console.log(this.listh)

      // this.listi = cityLists.city[8].listi
      // console.log(this.listi)

      this.listj = cityLists.city[8].listj;
      // console.log(this.listj)

      this.listk = cityLists.city[9].listk;
      // console.log(this.listk)

      this.listl = cityLists.city[10].listl;
      // console.log(this.listl)

      this.listm = cityLists.city[11].listm;
      // console.log(this.listm)

      this.listn = cityLists.city[12].listn;
      // console.log(this.listn)

      // this.listo = cityLists.city[13].listo
      // console.log(this.listo)

      this.listp = cityLists.city[13].listp;
      // console.log(this.listp)

      this.listq = cityLists.city[14].listq;
      // console.log(this.listq)

      this.listr = cityLists.city[15].listr;
      // console.log(this.listr)

      this.lists = cityLists.city[16].lists;
      // console.log(this.lists)

      this.listt = cityLists.city[17].listt;
      // console.log(this.listt)

      // this.listu = cityLists.city[18].listu
      // console.log(this.listu)

      // this.listv = cityLists.city[19].listv
      // console.log(this.listv)

      this.listw = cityLists.city[18].listw;
      // console.log(this.listw)

      this.listx = cityLists.city[19].listx;
      // console.log(this.listx)

      this.listy = cityLists.city[20].listy;
      // console.log(this.listy)

      this.listz = cityLists.city[21].listz;
      // console.log(this.listy)
    },

    gain(city) {
      sessionStorage.setItem("city", city);
      this.$router.go(-1);
      console.log(city);
    },

    handleLetterChange(letter) {
      this.letter = letter;
      // console.log(letter);
    },

    onClickLeft() {
      this.$router.go(-1);
    }
  },
  components: {
    // CityList
    // CityAlphabet,
  },
  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });
  }
};
</script>

<style></style>
